<template>

  <el-container>
    <el-header id="manageHeader" height="100px" >
      <!-- 搜索表单
      <el-form :inline="true" :model="searchBase" class="demo-form-inline" style="margin-top: 1.5%;">
        <el-form-item label="教师号">
          <el-input v-model="searchBase.teacherid" placeholder="请输入" style="width: 130px;">
          </el-input>
        </el-form-item>
        <el-form-item label="毕业年份">
          <el-input v-model="searchBase.endTime" placeholder="请输入" style="width: 130px;">
          </el-input>
        </el-form-item>
        <el-form-item label="研究方向">
          <el-input v-model="searchBase.researchdir" placeholder="请输入" style="width: 130px;">
          </el-input>
        </el-form-item>
        <el-form-item label="职称">
          <el-select v-model="value" style="width:90px" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="研究生导师">
          <el-select v-model="value2" style="width:90px" placeholder="请选择">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
       
      </el-form> -->
      <!-- 部门表格
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="teacherid" label="教师号" align="center">
          </el-table-column>
          <el-table-column prop="teacherName" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="sex" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="title" label="职称" align="center">
          </el-table-column>
          <el-table-column prop="tutor" label="研究生导师" align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="毕业时间" align="center">
          </el-table-column>
          <el-table-column prop="graduationSchool" label="毕业院校" align="center">
          </el-table-column>
          <el-table-column prop="speciality" label="专业" align="center">
          </el-table-column>
          <el-table-column prop="education" label="学位" align="center">
          </el-table-column>
          <el-table-column prop="researchdir" label="研究方向" align="center">
          </el-table-column>


        </el-table>
      </template> -->
     
     <!-- 分页工具条
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination> -->

   <el-form :inline="true" 
     style="margin-top: 2%;float: left;" >
      
    <el-form-item label="统计项目">
  <el-select v-model="value1" placeholder="请选择" >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item> 
  <el-form-item label="所属年份">
       <el-date-picker
      v-model="value3"
      type="year"
      placeholder="选择年"
      :disabled="value1=='2'?false:true" 
      value-format="yyyy">
       </el-date-picker>
       </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="changeValue" style="margin-left:20px">查询</el-button>
</el-form-item>
</el-form>
    </el-header>
    <el-main style="background-color:white;margin-top: 20px;">
      <!-- 年度考核 -->
      <div style="margin-left: 150px;">
     <div  class="echart" id="mychart1" :style="{ float: 'left', width: '100%', height: '520px' }">
      </div></div>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart,PieChart,LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
   ToolboxComponent,
     MarkPointComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
   ToolboxComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LegendComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
    MarkPointComponent
]);

export default {
name:'Colinfo',
data(){
    return{
      
options: [{
        value: '1',
        label: '年度考核'
      }, {
        value: '2',
        label: '获奖级别'
      }, {
        value: '3',
        label: '材料总数'
      },
      {
        value: '4',
        label: '教师情况'
      }],
      value1: '1',
      value2:'',
      value3:''
      /* 接受学院的信息
      academyName: '',
      // 搜索的表单
      searchBase: {
        teacherid: "",
        endTime: "",
        researchdir:"",
        title:'',
        tutor:''
      },
      // 教师职称下拉框
      options: [{
        value: '讲师',
        label: '讲师'
      }, {
        value: '副教授',
        label: '副教授'
      }, {
        value: '教授',
        label: '教授'
      }],
      value: '',
      // 研究生导师
      options2: [{
        value: '是',
        label: '是'
      }, {
        value: '否',
        label: '否'
        }, {
          value: '',
          label: '全部'
        }
      ],
      value2: '',
        // 统计表格数据
       tableData:[],
    
    // 分页
      totalCount: 0,
   
      // 当前页码
      currentPage: 1,
      pageSize: 5,
      */
    }
 
},
  mounted() {
    this.academyName = this.$store.state.Mark
    // this.selectAll();
    this.initEcharts1();
    
    // this.initEcharts2();
    // this.initEcharts3();
    // this.initEcharts4();
      // this.value2=this.value1
  },
  methods:{
    // onsubmit(){
    //   this.searchBase.title = this.value
    //   this.searchBase.tutor=this.value2
    //   this.selectAll()
   
    // },
    // selectAll(){
     
    //   axios({
    //     method: "post",
    //     url: " http://localhost:8888/Col_Infomation/" 
    //     + this.currentPage + "/" + this.pageSize + "/" + this.academyName,
    //     data: this.searchBase
    //   }).then(resp => {
    //     this.tableData = resp.data.data.rows;
    //     this.totalCount = resp.data.data.totalCount;
    //   })
    // },
    changeValue(){
      this.value2=this.value1;
      if(this.value2=='2'){
        this.initEcharts2();
      }else if(this.value2=='1'){
        this.initEcharts1();
      }else if(this.value2=='3'){
        this.initEcharts3();
      }else if(this.value2=='4'){
        this.initEcharts4();
      }
    },
    // 年度考核情况
     initEcharts1() {
    const myChart = echarts.init(document.getElementById("mychart1"));
    myChart.clear();
    axios({
      method: "get",
      url: "http://localhost:8888/Col_Infomation/getExamine?academyName="+this.academyName
    }).then((resp) => {// 图标初始化
    myChart.setOption({
  title: {
    text: '各年度考核合格人数',
  
  },
  tooltip: {
    trigger: 'axis'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  legend:{},
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022']
  },
  yAxis: {
    type: 'value',
    
  },
  series: [
    {
      type: 'line',
      data: resp.data.data,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
     
    },
  ]
    });
    })
    },
    // 获奖总数
     initEcharts2() {
      
    const myChart = echarts.init(document.getElementById("mychart1"));
    myChart.clear();
    axios({
      method: "get",
      url: "http://localhost:8888/Col_Infomation/getAward?academyName="+this.academyName+"&year="+this.value3
    }).then((resp) => {// 图标初始化
    if(resp.data.data == ''){
       this.$message({
            message: this.value3+'年无数据，请重新选择',
            type: 'error'
          });
    }else{
    myChart.setOption({
      title: {
    text: '各赛事获奖情况',
    subtext: '计算机学院',
    left: 'center'
  }, toolbox: {
    feature: {
      dataView: { readOnly: false },
      saveAsImage: {}
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    left: '10%',
    top: '10%',
     orient: "vertical"
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data:resp.data.data
    }
  ]

    });
    }
    })
    
    },
    // 材料总数
  initEcharts3() {
    const myChart = echarts.init(document.getElementById("mychart1"));
      myChart.clear();
    axios({
      method: "get",
      url: "http://localhost:8888/Col_Infomation/getBar?academyName="+this.academyName
    }).then((resp) => {// 图标初始化
    myChart.setOption({
      title: {
        text: "各项材料数目统计"
      },
      toolbox: {
    feature: {
      dataView: { readOnly: false },
      saveAsImage: {}
    }
  },
   tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
      xAxis: {
        data: ["专利数", "著作数", "科研项目数", "论文数" ]
      },
      yAxis: {},
      series: [
        {
         
             showBackground: true,
            
          type: "bar", //类型为柱状图
          data:resp.data.data
        }
      ]
    });
    })
    },
    //教学工作
 
    initEcharts4(){
      const myChart = echarts.init(document.getElementById("mychart1"));
      // 图标初始化
        myChart.clear();
      axios({
        method:"get",
        url: "http://localhost:8888/Col_Infomation/getPie?academyName=" + this.academyName
      }).then((resp)=>{
        myChart.setOption({
          legend: {
            // 图例
            data: resp.data.data,
            left: "20%",
            top: "20%",
            orient: "vertical"
          },
           tooltip: {
    trigger: 'item'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      saveAsImage: {}
    }
  },
          title: {
            // 设置饼图标题，位置设为顶部居中
            text: "学院职称人数统计",
            top: "10%",
            left: "center",
             textStyle:{
           fontSize:30}
             
          },
          series: [
            {
              type: "pie",
              label: {
                show: true,
                formatter: " {c} 个"
              },
              top: "20%",
              radius: "80%", //饼图半径
              data: resp.data.data
            }
          ]

        });
      })
     
     
    },
 
 // 分页操作
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.selectAll();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.selectAll();
    }
  },
}


</script>

<style>

</style>